<script setup lang="ts">
import { useUserPinia } from "~/stores/user";
import { computed } from "vue";

const { locale, setLocale, tm } = useI18n();

const seo_title = computed(() => {
  return tm("our_story.seo.title");
});
const seo_ogDescription = computed(() => {
  return tm("our_story.seo.ogDescription");
});

const data_products = computed(() => {
  return [
    {
      id: 1,
      imageUrl:
        "https://www.lightbicycle.com/images/thumbnail/Mountain-Bike/XC930-Plus/xc930-plus-255g-featherlight-cross-country-carbon-rim-220x220.jpg?t=20210710",
      title: "29er-Recon Pro-RIM",
      subTitle: "XC930-Plus-35.6mm wide-22mm deep",
      shop: "BUILD MINE",
      star: 4.8,
      price: "$1,389",
      monthPrice: "$116",
      fabric: "Standard 255g+/-15",
    },
    {
      id: 1,
      imageUrl:
        "https://www.lightbicycle.com/images/thumbnail/Mountain-Bike/XC930-Plus/xc930-plus-255g-featherlight-cross-country-carbon-rim-220x220.jpg?t=20210710",
      title: "29er-Recon Pro-RIM",
      subTitle: "XC930-Plus-35.6mm wide-22mm deep",
      shop: "BUILD MINE",
      star: 4.8,
      price: "$1,389",
      monthPrice: "$116",
      fabric: "Standard 255g+/-15",
    },
    {
      id: 1,
      imageUrl:
        "https://www.lightbicycle.com/images/thumbnail/Mountain-Bike/XC930-Plus/xc930-plus-255g-featherlight-cross-country-carbon-rim-220x220.jpg?t=20210710",
      title: "29er-Recon Pro-RIM",
      subTitle: "XC930-Plus-35.6mm wide-22mm deep",
      shop: "BUILD MINE",
      star: 4.8,
      price: "$1,389",
      monthPrice: "$116",
      fabric: "Standard 255g+/-15",
    },
    {
      id: 1,
      imageUrl:
        "https://www.lightbicycle.com/images/thumbnail/Mountain-Bike/XC930-Plus/xc930-plus-255g-featherlight-cross-country-carbon-rim-220x220.jpg?t=20210710",
      title: "29er-Recon Pro-RIM",
      subTitle: "XC930-Plus-35.6mm wide-22mm deep",
      shop: "BUILD MINE",
      star: 4.8,
      price: "$1,389",
      monthPrice: "$116",
      fabric: "Standard 255g+/-15",
    },
    {
      id: 1,
      imageUrl:
        "https://www.lightbicycle.com/images/thumbnail/Mountain-Bike/XC930-Plus/xc930-plus-255g-featherlight-cross-country-carbon-rim-220x220.jpg?t=20210710",
      title: "29er-Recon Pro-RIM",
      subTitle: "XC930-Plus-35.6mm wide-22mm deep",
      shop: "BUILD MINE",
      star: 4.8,
      price: "$1,389",
      monthPrice: "$116",
      fabric: "Standard 255g+/-15",
    },
    {
      id: 1,
      imageUrl:
        "https://www.lightbicycle.com/images/thumbnail/Mountain-Bike/XC930-Plus/xc930-plus-255g-featherlight-cross-country-carbon-rim-220x220.jpg?t=20210710",
      title: "29er-Recon Pro-RIM",
      subTitle: "XC930-Plus-35.6mm wide-22mm deep",
      shop: "BUILD MINE",
      star: 4.8,
      price: "$1,389",
      monthPrice: "$116",
      fabric: "Standard 255g+/-15",
    },
    {
      id: 1,
      imageUrl:
        "https://www.lightbicycle.com/images/thumbnail/Mountain-Bike/XC930-Plus/xc930-plus-255g-featherlight-cross-country-carbon-rim-220x220.jpg?t=20210710",
      title: "29er-Recon Pro-RIM",
      subTitle: "XC930-Plus-35.6mm wide-22mm deep",
      shop: "BUILD MINE",
      star: 4.8,
      price: "$1,389",
      monthPrice: "$116",
      fabric: "Standard 255g+/-15",
    },
    {
      id: 1,
      imageUrl:
        "https://www.lightbicycle.com/images/thumbnail/Mountain-Bike/XC930-Plus/xc930-plus-255g-featherlight-cross-country-carbon-rim-220x220.jpg?t=20210710",
      title: "29er-Recon Pro-RIM",
      subTitle: "XC930-Plus-35.6mm wide-22mm deep",
      shop: "BUILD MINE",
      star: 4.8,
      price: "$1,389",
      monthPrice: "$116",
      fabric: "Standard 255g+/-15",
    },
  ];
});

// SEO 会根据中英文切换做不同的SEO
useSeoMeta({
  title: seo_title,
  ogDescription: seo_ogDescription,
});
</script>

<template>
  <v-app>
    <v-sheet color="#F5F4F2">
      <v-sheet class="pt-[72px]">
        <banner-image
          HeadLabel="MOUNTAIN BIKE RIMS/WHEELS"
          HeadImage="https://www.lightbicycle.com/images/page-img/Mountain-background-20190523.jpg"
        />
      </v-sheet>

      <v-sheet color="#EEE9E3" class="d-flex flex-column pt-8 pb-10">
        <div class="text-center pt-16 ma-8">
          <p class="font-buttershine-serif text-[#413e3a] text-3xl lg:text-4xl">
            Rims
          </p>
        </div>
        <div class="d-flex justify-center">
          <v-sheet color="transparent" max-width="1100">
            <div class="pb-8">
              <v-row class="">
                <v-col
                  v-for="item in data_products"
                  :key="item.id"
                  class="d-flex justify-center pa-0"
                >
                  <v-card
                    elevation="0"
                    rounded="0"
                    link
                    :class="['ma-3']"
                    color="#F5F4F2"
                    class="sm:w-[250px] w-[230px]"
                  >
                    <v-img :src="item.imageUrl"></v-img>

                    <div class="text-center">
                      <div class="pt-6 text-xl font-semibold text-[#413e3a]">
                        {{ item.title }}
                      </div>
                      <div class="font-thin text-xs italic py-1">
                        {{ item.subTitle }}
                      </div>
                      <v-row class="d-flex align-center justify-center pt-2">
                        <div class="text-center">
                          <v-rating
                            v-model="item.star"
                            size="small"
                            readonly
                            half-increments
                            active-color="#bf9b81"
                            color="#C1C1C1"
                            density="compact"
                          ></v-rating>
                        </div>
                        <span class="font-thin text-xs pl-1">{{
                          item.star
                        }}</span>
                      </v-row>
                      <div class="font-thin text-xs pt-2">
                        USD: <span class="font-semibold">{{ item.price }}</span>
                      </div>
                      <div class="font-thin text-xs py-1">
                        {{ item.fabric }}
                      </div>
                      <div
                        class="pt-4 mb-10 text-[#786554] underline underline-offset-8"
                      >
                        {{ item.shop }}
                      </div>
                    </div>
                  </v-card>
                </v-col>
              </v-row>
            </div>
          </v-sheet>
        </div>
      </v-sheet>
    </v-sheet>
  </v-app>
</template>

<style scoped>
</style>